<template>
  <div class="set-roles-view" v-loading="loading">
    <div class="role-tree-data-view">
      <el-tree ref="tree" :data="roleTreeData" :props="treeProps" node-key="id" default-expand-all :expand-on-click-node="false" show-checkbox :check-strictly="true"
        @check-change="handleNodeClick"></el-tree>
    </div>
    <div style="text-align: center;">
      <el-button type="primary" @click="setRoles">{{$t('global.submit')}}</el-button>
      <el-button @click="innerVisible = false">{{$t('global.cancel')}}</el-button>
    </div>
  </div>
</template>

<script>

import { getRoleTreeList } from '@/api/roleApi.js'
import { setUserRoles } from '@/api/userApi.js'

export default {
  data(){
    return{
      loading:false,
      roleTreeData:[],
      treeProps: {
        children: 'children',
        label: 'name'
      },
      roleList:[],
      checkKeys:[],
      roleUserId:''
    }
  },
  watch:{
    roleIds(newVal,oldVal){
      this.checkKeys = []
      if(newVal != null && newVal != ''){
        this.checkKeys = newVal.split(",")
      }
      this.$refs.tree.setCheckedKeys(this.checkKeys);
    },
    userId(newVal,oldVal){
      this.roleUserId = newVal
    }
  },
  components:{

  },
  props: ["roleIds","userId"],
  created(){
    this.roleUserId = this.userId
    this.getRoleList()
  },
  mounted(){
    this.$nextTick(()=>{
      if(this.roleIds != null && this.roleIds != ''){
        this.checkKeys = this.roleIds.split(",")
      }
      this.$refs.tree.setCheckedKeys(this.checkKeys);
    })
  },
  methods:{
    getRoleList(){              //获取角色列表
      getRoleTreeList().then((res)=>{
        if(res.status == 200){
          this.roleList = res.data
          this.roleTreeData = this.getMenuList(0)
        }
      }).catch((e)=>{

      })
    },
    getMenuList(pId){           //将角色列表分类成树形结构
      const temp = [];
      for (const item of this.roleList) {
        if (item.pId === pId && item.id != 0) {
          item.children = this.getMenuList(item.id);
          temp.push(item);
        }
      }
      return temp;
    },
    handleNodeClick(data,check){      //树形节点点击触发事件
    },
    setRoles(){
      let roles = this.$refs.tree.getCheckedKeys()
      console.log(roles)
      if(roles.length == 0){
        this.$message.warning(this.$t('user_management.roles_error'))
        return
      }
      this.loading = true
      let formData = new FormData()
      formData.append("roleIds",roles.join(","))
      formData.append("userId",this.roleUserId)
      setUserRoles(formData).then((res)=>{
        this.loading = false
        if(res.data.code == 200){
          this.$message({
            message:this.$t('global.modified_success'),
            type: 'success'
          });
          this.$emit('refreshData')
        }else{
          this.$message.error(res.data.message)
        }
      }).catch((e)=>{
        this.loading = false
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.set-roles-view{
  width: 100%;
  height: 500px;
  display: flex;
  flex-direction: column;
  .role-tree-data-view{
    flex: 1;
    width: 100%;
    overflow: auto;
    margin-bottom: 20px;
    margin-top: -10px;
  }
}
</style>
